<!doctype html>
<html lang="">
<head>
	<meta charset="UTF-8">
	<title>欢迎来到WeVote</title>
	<!-- <link rel="stylesheet" href="common.css"> -->
	<script src="common.js"></script>
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

section { padding: 0; }


@font-face {
	font-family: 'ping';
	src: url('img/qingcong.woff') format('woff'), url('img/qingcong.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


/*********** Section : Nav *******/
#nav { 
	display:flex;
	flex-flow: column nowrap;
	position: fixed;
	top:0; bottom:0; left:0; right:0;
	background: white;
	z-index:2;
	transition: 1s all;
	box-shadow: 0 0 3px 2px rgba(0,0,0,0.1);
	box-sizing: border-box;
}
	#nav.hidden { transform: translate(0,-100%); }
	#nav .head {
		flex:1 100%;
		position: relative;
	}
		#canvas-container { 
			display: absolute;
			top:0;
			left:0;
			right:0;
		}
		#canvas-container canvas{ 
			width: 100%;
		}
		.head-wrap{
			position: absolute;
			top: 50%;
			left:0; right:0;
			transform: translate(0,-50%);
		}
		.app-logo {
			height: 8em;
			background-image: url(img/app-logo.png);
			background-size:6em 6em;
			background-position: center center;
			background-repeat: no-repeat;
		}

		h2 {
			margin:0 auto 11px auto;
			color: #EB6841;
			font-size: 1.5em;
			line-height: 1em;
			text-align:center;
			font-weight: normal;
			letter-spacing: 2px;
		}
		.title-tip {
			margin: 11px auto;
			color: #EB6841;
			font-size: 0.9em;
			line-height: 1em;
			text-align:center;
		}

	#nav .main {
		flex:1 0;
	}
		#nav .buttons {
			padding: 0.4em 0;
		}
		.buttons a {
			display:block;
			width:10em;
			line-height:2.6em;
			margin:0 auto 1em auto;
			font-size:1.0em;
			text-align:center;
			color:white;
			background:#EB6841;
			border-radius:0.6em;
			vertical-align: middle;
			text-decoration:none;
			box-shadow: 2px 2px 3px 3px #F8E4D6; 
		}

.intro{ visibility: hidden; width:100%;margin-bottom: 1em;}
	.intro .shallow-box {
		height: 4em;
		margin: 0 1em;
		padding: 1em 1.6em 1.3em 1.6em;
		background-color: #F8E4D6;
		color:#FFFFFF;
		border-radius: 0.6em;
	}

	.intro h5{ 
		font-size:0.88em;
		text-align:center;
		font-weight: bold;
		margin-bottom: 0.4em;
	}
	.intro p {
		font-size: 0.8em;
		color: #FFFFFF;
	}

.bottom-line {
	background: linear-gradient(to bottom,transparent 0, transparent 49%, #D8D8D8 49% ,#D8D8D8 51%, transparent 51%);
	margin: 0 0.3em;
	width:auto;
	text-align:center;
	color: #BEBEBE;
	font-size:0.7em; 
	line-height:3em;
}
	.bottom-line span { padding:0 0.6em;background-color: #FFFFFF; }


/********* Section : Detail *********/
#detail {
	position: fixed;
	top:0; right:0; left:0;
	padding: 0.3em 0 0 0;
	height: 100%;
	background: white;
	box-sizing: border-box;
	z-index:1;
	overflow:auto;
}
	.text {
		width:80%;
		max-width: 600px;
		min-width: 200px;
		margin: 1em auto 2em auto;
	}
	#detail h3 {
		margin: 0.8em 0 0.2em 0;
		font-weight: middle;
		font-size: 1.2em;
		color:#D53A0C;
		line-height: 1.2em;
	}

	#detail .text p {
		font-size: 0.8em;
		color: #EB6841;
		line-height: 1.6em;
		font-weight: normal;
	}

.contact {
	width: auto;
	padding: 1em 0 2em 0;
	text-align:center;
}

	.contact .qrcode {
		width:8em; height:8em;
		margin: 0 0 0.4m 0;
	}
	.contact .content {
		font-size: 0.9em;
		color: #B8B8B8;
		line-height: 1.6em;
		font-weight: normal;
	}


/******* Section : guide *********/
#guide {
	left:0; right:0; top:0; bottom:0;
	display: block;
	position: fixed;
	background: rgba(0,0,0,0.7);
	z-index:4;
	font-family: 'ping', Times;
	-webkit-animation-name: guide_fade_out;
	-webkit-animation-duration: 1s;
	-webkit-animation-play-state: paused;
}

#guide.running {
	-webkit-animation-fill-mode: both;
	-webkit-animation-play-state: running;
}
#guide.hidden {
	display: none;
}

@-webkit-keyframes guide_fade_out {
	0% { opacity:1;}
	99%{ opacity:0;}
	100% { opacity:0; visibility:hidden;}
}

	#guide .item1, #guide .item2, #guide .ikonw {
		position: absolute;
		font-size: 1.2em;
		color: #F19E47;
		line-height:1.6em;
		text-shadow: rgba(0,0,0,0.9) 0 0 4px; 
	}

	#guide .item1 p, #guide .item2 p {
		width:80%;
		margin:0 auto;
	}

	#guide .item1{
		top:30%;
		width: 100%;
		margin:-4em auto 0 auto;
	}
		#guide .item1 p {
			width:60%;
			margin: 0 auto 0 10%;
		}
		#guide .item1 span {
			display: block;
			position: absolute;
			top:-1.6em; right:10%;
			width: 23%; max-width:5em; height:5em;
			background-image: url(img/guide-arrow.png);
			background-position: 100% 0;
			background-repeat: no-repeat;
		}
	#guide .item2{
		top:50%;
		width: 100%;
		margin:0 auto 0 auto;
	}

	#guide .ikonw{
		top:80%;
		width: 100%;
		margin:0 auto 0 auto;
	}
		#guide .ikonw a{
			display:block;
			box-sizing: border-box;
			width:8em;
			margin: 0 auto;
			border-radius: 0.4em;
			border: 2px solid;
			line-height: 2em;
			font-size:100%;
			text-align:center;
			box-shadow:rgba(0,0,0,0.8) 0 0 3px;
		}

</style>

</head>
<body>

<div></div>

<section id="sine-curb">
</section>

<section id="nav">

<div class="head">
	<div id="canvas-container">
		<canvas width=800 height=260></canvas>
	</div>

	<div class="head-wrap">
		<div class="app-logo"></div>
		<h2>WeVote</h2>
		<p class="title-tip">轻松设计你的微信小投票</p>
	</div>
</div>

<div class="main">
	<div class="buttons">
		<a class="main-btn" href="new.htm">新建投票</a>
		<a class="main-btn" href="my.htm">历史投票记录</a>
	</div>

	<div class="intro" style="">
		<div class="shallow-box">
			<h5>Why WeVote</h5>
			<p>这里是内容</p>
		</div>
	</div>

	<div class="bottom-line" onclick="togglePage()">
		<span class="one">详细了解</span>
	</div>
</div>
</section>



<section id="detail">
	<div class="bottom-line" onclick="togglePage()">
		<span class="two">点击返回</span>
	</div>
	<div class="text">
		<h3>WeVote可以做什么</h3>
		<p>微信群组内投票工具，轻松创建微信小投票并分享给他人</p>
		<h3>WeVote特色</h3>
		<p>1.优化现有投票机制，首创加权式投票系统。解决投票过程中情感程度不同的问题，让投票统计结果更加精准。<br>2.微信群也可以像QQ群一样投票，两分钟制作投票页面，以更少的时间获得更多的信息，帮助您更快更准确的决策<br>3.无需下载，即用即走，你的贴心微信小助手</p>
	</div>

	<div class="contact">
		<img class="qrcode" src="img/qrcode.jpg"></img>
		<p class="content">扫描二维码关注公众号“大软坊”<br>获取更多实用微信小工具</p>
	</div>
</section>


<section id="guide">
	<div class="item1">
		<p>1、轻触右上角选择收藏，添加我们到微信收藏，下一次快速访问！</p>
		<span></span>
	</div>
	<div class="arrow"></div>
	<div class="item2">
		<p>2、轻触下方“详细了解”，深入了解新颖的WeVote — 微信小投票</p>
	</div>
	<div class="ikonw"><a onclick="hideGuide(true)">我知道了</a></div>
</section>



<script>
function hideGuide(fadeOut){
	document.getElementById('guide').classList.add(fadeOut?'running':'hidden');
	//Storage
	localStorage.lastVisit = Date.now();
	console.log(localStorage);
}

function showGuide(){
	document.getElementById('guide').style.display = 'block';
}

function togglePage(){
	document.getElementById('nav').classList.toggle('hidden');
}

function init(){
	var std = localStorage.lastVisit;
	if(std){
		if(Date.now() - std  > 6000000){
			showGuide();
		}else{
			//Do something
			hideGuide();
		}
	}else{
		//the first to visit
		showGuide();
	}
	localStorage.lastVisit = Date.now();
}

function setStoreData(data){
	var x;
	if(data == undefined){
		data = {};
	}

	//HTML5 Local Storage
	if(localStorage.homePageData){
		var storageContainer = localStorage.homePageData;
	}else {
		localStorage.homePageData = '';
		var storageContainer = localStorage.homePageData;
	}

	for( x in data ){
		storageContainer[x] = data[x];
	}

	
	if(storageContainer == localStorage.homePageData){
		return true;
	}
}

function getStoreData(){
	if(localStorage.homePageData){
		return localStorage.homePageData;
	}else{
		return false;
	}
}

var canvasDrawer = {
	sp:0,
	drawSin: function(a,w,offset,way,color){
		var yPos = 130;
		var xAxis = 30;
		var canvasElem = document.getElementsByTagName('canvas')[0];
		var canWidth = canvasElem.width;
		var canHeight= canvasElem.height;
		var context = canvasElem.getContext('2d');

		var funcGen = function(a, w, offset){
			return function(x){
				return (a * Math.sin(w*x+offset));
			}
		}
		var mySin = funcGen(a, w,offset);

		//StartDraw
		context.beginPath();
		context.moveTo(0,0);
		for(i=0; i<canWidth; i+=canWidth/400){
			context.lineTo(i,mySin(i/xAxis)+yPos);
		}
		if(way){
			context.lineTo(canWidth,0);
			context.lineTo(0,0);
			context.closePath();
			context.fillStyle = color
			context.fill();
		}else{
			context.strokeStyle = color
			context.lineWidth = 3;
			context.stroke();
		}
	},
	render: function(){
		var canvasElem = document.getElementsByTagName('canvas')[0];
		//根据页面宽度调整canvas宽度
		canvasElem.width = document.body.offsetWidth;
		var canWidth = canvasElem.width;
		var canHeight= canvasElem.height;
		var context = canvasElem.getContext('2d');
		context.clearRect(0, 0, canWidth, canHeight);
		this.sp = this.sp||0;
		this.sp += 0.03;
		var sp = this.sp; 
		canvasDrawer.drawSin(30,0.4,1.6*sp,true,'#FDF8C1');
		canvasDrawer.drawSin(14,0.6,sp,true,'rgba(250, 234, 219, 0.9)');
		canvasDrawer.drawSin(43,0.4,0.6*sp,false,'rgba(251, 162, 136, 0.8)');
		canvasDrawer.drawSin(23,0.2,0.1*sp,false,'rgba(253, 198, 98, 0.8)');
		requestAnimationFrame(arguments.callee);
	}
}
canvasDrawer.render();

init();

</script>

<!-- CNZZ Status -->
<script src="http://s11.cnzz.com/stat.php?id=1261578070&web_id=1261578070" language="JavaScript"></script>

</body>
</html>
